new Vue({
    el: "#mainContent",
    data: {
        videoId: "",
        video: {},
        remarkList: [],
        remarkContent: "",
        getVideoDetailUrl: "/video/get_video_info.ajax",
        publishRemarkUrl: "/video/publish_remark.ajax",
        listRemarkUrl: "/video/list_remark.ajax"
    },
    mounted: function () {
        this.videoId = $("#videoId").val();
        this.initPage();
    },
    methods: {
        //初始化页面
        initPage: function () {
            this.$http.post(this.getVideoDetailUrl, {videoId: this.videoId}, {emulateJSON: true})
                .then((response) => {
                    console.log(JSON.stringify(response.data));
                    this.$set(this, "video", response.data.data.video);
                    this.$set(this, "remarkList", response.data.data.remarkList);
                })
                .catch(function (response) {
                    console.log(response)
                });
        },
        pubRemark: function () {
            this.$http.post(this.publishRemarkUrl, {
                videoId: this.videoId,
                remarkContent: this.remarkContent
            }, {emulateJSON: true})
                .then((response) => {
                    console.log(JSON.stringify(response.data));
                    if (Number(response.data.code) == 0) {
                        this.listRemark();
                    } else {
                        alert("发表评论失败!");
                    }
                })
                .catch(function (response) {
                    console.log(response)
                });
        },
        listRemark: function () {
            this.$http.post(this.listRemarkUrl, {
                videoId: this.videoId
            }, {emulateJSON: true})
                .then((response) => {
                    console.log(JSON.stringify(response.data));
                    this.$set(this, "remarkList", response.data.data);
                })
                .catch(function (response) {
                    console.log(response)
                });
        }
    }
});